
import { Component, OnInit, Input, Output, EventEmitter, Renderer2, OnChanges, SimpleChanges } from '@angular/core';
import { SafeStyle, DomSanitizer } from '@angular/platform-browser';
import { SliderComponent } from './slider.component';
import { fadeSliderAnimation } from '../shared/animation/index';

@Component({
  selector: 'el-slider-button',
  animations: [fadeSliderAnimation],
  templateUrl: './slider-button.component.html'
})
export class SliderButtonComponent implements OnInit, OnChanges {
   root: any;
   
  private sanitizer: any;
  private renderer: any;
  @Input() disabled: boolean = false;
  @Input() model: number = 0;
  @Input() vertical: boolean = false;
  @Input('format-tooltip') formatTooltip!: Function;
  @Input() min: number = 0;
  @Input() max: number = 100;
  @Output('change') modelChange: EventEmitter<any> = new EventEmitter();
  @Input() hovering: boolean = false;
  @Input() dragging: boolean = false;
  @Input() popper: boolean = false;
  @Input() wrapperStyles!: SafeStyle;
  @Input() startY: number = 0;
  @Input() startX: number = 0;
  @Input() currentY: number = 0;
  @Input() currentX: number = 0;
  @Input() startPosition: number = 0;
  @Input() position: number = 0;
  @Input() globalListenFunc: Function[] = [];
  @Input() showPopper: boolean = true;
  constructor(root: SliderComponent, sanitizer: DomSanitizer, renderer: Renderer2) {
    this.root = root;
    this.sanitizer = sanitizer;
    this.renderer = renderer;
  }

  ngOnChanges(changes: SimpleChanges): void {
    // not include model
    if (!changes || !changes.model)
      return;
    this.model = changes.model.currentValue;
    this.updateWrapperStyle();
  }


  ngOnInit(): void {
    this.updateWrapperStyle();
  }


  popperMouseHandle(t: any) {
    if (!this.dragging && !t) {
      this.showPopper = false;
    }
    if (t && !this.disabled) {
      this.showPopper = true;
    }
  }

  getCurrentPosition() {
    return (this.model - this.min) / (this.max - this.min) * 100;
  }

  updateWrapperStyle() {
    var /** @type {?} */ currentPosition = this.getCurrentPosition();
    var /** @type {?} */ styles = (this.vertical ? 'bottom' : 'left') + ": " + currentPosition + "%";
    this.wrapperStyles = this.sanitizer.bypassSecurityTrustStyle(styles);
  }

  formatValue() {
    return this.formatTooltip ? this.formatTooltip(this.model) : this.model;
  }

  togglePopper(t: any) {
    this.hovering = t;
    this.popper = t;
    this.showPopper = t;
  }

  buttonDownHandle(event: any) {
    
    var _this = this;
    event.preventDefault();
    if(this.root.disabled) {
      return;
    }
    this.onDragStart(event);
    (_a = this.globalListenFunc).push.apply(_a, [
      this.renderer.listen('window', 'mousemove', function (e:any) {
        _this.draggingHandle(e);
      }),
      this.renderer.listen('window', 'mouseup', function () {
        _this.dragEndHandle();
      })
    ]);
    var _a;
  }

  onDragStart(event: any) {
    this.popperMouseHandle(true);
    this.dragging = true;
    if (this.vertical) {
      this.startY = ((event)).clientY;
    }
    else {
      this.startX = ((event)).clientX;
    }
    
    this.startPosition = this.getCurrentPosition();
  }

  draggingHandle(event: any) {
    if (!this.dragging)
      return;
    if(this.root.disabled) {
      return;
    }
    
    this.togglePopper(true);
    this.root.resetSize();
    var /** @type {?} */ diff = 0;
    if (this.vertical) {
      this.currentY = ((event)).clientY;
      diff = (this.startY - this.currentY) / this.root.size * 100;
    }
    else {
      this.currentX = ((event)).clientX;
      diff = (this.currentX - this.startX) / this.root.size * 100;
    }
    this.position = this.startPosition + diff;
    this.setPosition(this.position);
  }


  dragEndHandle() {
    var _this = this;
    if (!this.dragging)
      return;
    // hide tooltip
    this.showPopper = false;
    var /** @type {?} */ timer = setTimeout(function () {
      _this.dragging = false;
      _this.togglePopper(false);
      _this.setPosition(_this.position);
      clearTimeout(timer);
    }, 0);
    this.globalListenFunc.forEach(function (func) { return func(); });
    this.globalListenFunc = [];
  }

  setPosition(next: any) {
    if (next === null)
      return;
    var /** @type {?} */ checkedNext = next < 0 ? 0 : next > 100 ? 100 : next;
    var /** @type {?} */ val = checkedNext * (this.max - this.min) * 0.01 + this.min;
    if (Number.isNaN(val))
      return;
    this.model = Math.round(val);
    this.modelChange.emit(this.model);
    this.updateWrapperStyle();
  }
}
